// 品牌列表组件
<template>
  <!-- 卡片区域 -->
  <div class="card">
    <h5 class="card-header">添加品牌</h5>
    <div class="card-body">
      <!-- 添加品牌的表单 -->
      <!-- Inline forms组件 -->
      <form class="form-inline" @submit.prevent>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">品牌名称</div>
          </div>
          <!-- 文本输入框 -->
          <input type="text" class="form-control" v-model.trim="brandname" @keyup.esc="brandname = ''" />
        </div>

        <!-- 提交表单的按钮 -->
        <button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
      </form>
    </div>
  </div>

  <!-- 品牌列表 -->
  <table class="table table-bordered table-striped mt-2">
    <thead>
      <tr>
        <th>#</th>
        <th>品牌名称</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格的主体区域 -->
    <tbody>
      <!-- TODO：循环渲染表格的每一行数据 -->
      <tr v-for="(item, index) in brandlist" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.brandname }}</td>
        <td>
          <!-- Switches组件 -->
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state" />
            <label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
            <label class="custom-control-label" :for="item.id" v-else>已禁用</label>
          </div>
        </td>
        <td>{{ dateFormat(item.addtime) }}</td>
        <td>
          <a href="#" @click.prevent="removeBrand(item.id)">删除</a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      brandname: '',
      nextId: 4,
      brandlist: [
        { id: 1, brandname: '宝马', state: true, addtime: new Date() },
        { id: 2, brandname: '奥迪', state: false, addtime: new Date() },
        { id: 3, brandname: '奔驰', state: true, addtime: new Date() },
      ],
    }
  },
  methods: {
    // 添加新的品牌数据
    addNewBrand() {
      // 判断品牌名称是否为空
      if (!this.brandname) return alert('品牌名称不能为空！')
      // 添加新的品牌数据
      this.brandlist.push({
        id: this.nextId,
        brandname: this.brandname,
        state: true,
        addtime: new Date(),
      })
      // 重置文本框的值
      this.brandname = ''
      // 让 nextId 自增 +1
      this.nextId++
    },
    // 根据 Id 删除对应的数据
    removeBrand(id) {
      this.brandlist = this.brandlist.filter((x) => x.id !== id)
    },
  },
  computed: {
    dateFormat(dateStr) {
      const dt = new Date(dateStr)

      const y = dt.getFullYear()
      const m = padZero(dt.getMonth() + 1)
      const d = padZero(dt.getDate())

      const hh = padZero(dt.getHours())
      const mm = padZero(dt.getMinutes())
      const ss = padZero(dt.getSeconds())

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    },
  },
}
</script>
